<template>
  <div>
    <v-dialog :title="isEdit?'税率方案编辑':'税率方案新增'" :show.sync="dialogVisible" @beforeClose="beforeClose" width="1200px">
      <div class="card-box">
        <el-form ref="editForm" :model="form" class="form-wrap" size="small" :rules="rules">
          <el-form-item label="税率类型" prop="taxesName">
            <el-input disabled v-model="form.taxesName"></el-input>
          </el-form-item>
          <el-form-item v-if="form.taxesName != '城镇土地使用税'" label="税率" prop="taxes">
            <el-input v-model="form.taxes" type="number" min="0" max="100" placeholder="请输入" @blur="handleClickTaxesName">
              <template slot="append">%</template>
            </el-input>
          </el-form-item>
          <el-form-item label="税率更新时间" prop="updateTime">
            <el-date-picker v-model="form.updateTime" type="date" value-format="yyyy-MM-dd" format="yyyy-MM-dd" placeholder="税率更新时间"></el-date-picker>
          </el-form-item>
          <el-form-item label="计算公式" prop="formula">
            <el-input v-model="form.formula" maxlength="50" placeholder="请输入"></el-input>
          </el-form-item>
          <el-form-item label="税率适用时间范围" prop="taxesDateArr">
            <el-date-picker
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              v-model.trim="form.taxesDateArr"
              format="yyyy-MM-dd"
              valueFormat="yyyy-MM-dd"
              @input="dateChange"
            ></el-date-picker>
          </el-form-item>
          <el-form-item label="备注" class="full" prop="remarks">
            <el-input v-model="form.remarks" type="textarea" placeholder="请输入" maxlength="200"></el-input>
          </el-form-item>

          <el-table v-if="form.taxesName === '城镇土地使用税'" :data="taxesApplyArr" class="full" align="center">
            <el-table-column label="税级" align>
              <template>税额</template>
            </el-table-column>
            <el-table-column label="1" prop="taxesApply1">
              <template slot-scope="scope">
                <el-input v-model="scope.row.taxesApply1" placeholder="请输入"></el-input>
              </template>
            </el-table-column>
            <el-table-column label="2" prop="taxesApply2">
              <template slot-scope="scope">
                <el-input v-model="scope.row.taxesApply2" placeholder="请输入"></el-input>
              </template>
            </el-table-column>
            <el-table-column label="3" prop="taxesApply3">
              <template slot-scope="scope">
                <el-input v-model="scope.row.taxesApply3" placeholder="请输入"></el-input>
              </template>
            </el-table-column>
            <el-table-column label="4" prop="taxesApply4">
              <template slot-scope="scope">
                <el-input v-model="scope.row.taxesApply4" placeholder="请输入"></el-input>
              </template>
            </el-table-column>
            <el-table-column label="5" prop="taxesApply5">
              <template slot-scope="scope">
                <el-input v-model="scope.row.taxesApply5" placeholder="请输入"></el-input>
              </template>
            </el-table-column>
          </el-table>
        </el-form>
      </div>
      <span slot="foot">
        <el-button @click="cancel">取 消</el-button>
        <el-button v-throttle=" [commit]">提 交</el-button>
      </span>
    </v-dialog>
  </div>
</template>

<script>
import engineerList from '@/components/engineer-list'
import { addObj, putObj } from '../../../api/finance-manage-taxes'
import { doubleValidate } from '~/utils/validate.js'
import BaseLoad from '@/assets/vue-mixin/BaseLoad'

export default {
  mixins: [BaseLoad],
  components: { engineerList },

  data () {
    return {
      fileSize: 50,
      formData: {},
      input: '',
      value: '',
      area: [],
      form: {
        taxesName: '',
        taxes: '',
        formula: '',
        taxesApply: '',
        updateTime: '',
        startTime: '',
        endTime: '',
        remarks: '',
        taxesDateArr: [],
      },
      selectDataArr: [],

      taxesApplyArr: [{
        taxesApply1: '',
        taxesApply2: '',
        taxesApply3: '',
        taxesApply4: '',
        taxesApply5: ''
      }],

      dialogVisible: false,
      isEdit: false,
      rules: {
        taxes: [{ required: true, message: '请输入税率', trigger: 'blur' },
        { validator: doubleValidate, trigger: "blur" }],
        taxesApply1: [{ required: true, message: '请输入适用税额', trigger: 'blur' }],
        taxesApply2: [{ required: true, message: '请输入适用税额', trigger: 'blur' }],
        taxesApply3: [{ required: true, message: '请输入适用税额', trigger: 'blur' }],
        taxesApply4: [{ required: true, message: '请输入适用税额', trigger: 'blur' }],
        taxesApply5: [{ required: true, message: '请输入适用税额', trigger: 'blur' }],

        formula: [{ required: true, message: '请输入税率更新时间', trigger: 'change' }],
        updateTime: [{ required: true, message: '请输入计算公式', trigger: 'change' }],
        taxesDateArr: [{ required: true, message: '请输入税率适用时间范围', trigger: 'blur' }]
      }
    }
  },
  methods: {
    show (item) {
      this.dialogVisible = true
      setTimeout(() => {
        this.isEdit = false
        this.$refs.editForm.resetFields()
        delete this.form.propertyId
        if (item) {
          this.isEdit = true
          this.form = item
          Object.keys(this.form).forEach(key => {
            this.form[key] = item[key]
          })
          if (this.form.taxesName === '城镇土地使用税') {
            let arr = this.form.taxes.split(',')
            this.taxesApplyArr[0].taxesApply1 = arr[0]
            this.taxesApplyArr[0].taxesApply2 = arr[1]
            this.taxesApplyArr[0].taxesApply3 = arr[2]
            this.taxesApplyArr[0].taxesApply4 = arr[3]
            this.taxesApplyArr[0].taxesApply5 = arr[4]
          }
          this.form.taxesDateArr = [this.form.startTime, this.form.endTime]
        }
      }, 200)
    },
    commit () {
      this.$refs.editForm.validate(valid => {
        if (valid) {
          if (this.isEdit) {
            if (this.form.taxesName === '城镇土地使用税') {
              let ta = this.taxesApplyArr[0];
              this.form.taxes = ta.taxesApply1 + "," + ta.taxesApply2 + "," + ta.taxesApply3 + "," + ta.taxesApply4 + "," + ta.taxesApply5
            }
            this.form.startTime = this.form.taxesDateArr[0]
            this.form.endTime = this.form.taxesDateArr[1]
            putObj(this.form).then(resp => {
              if (resp.data.data) {
                this.suc('提交成功')
                this.dialogVisible = false
                this.$emit('resetList')
              } else {
                this.err('提交失败')
              }
            })
          } else {
            addObj(this.form).then(resp => {
              if (resp.data.data) {
                this.suc('添加成功')
                this.dialogVisible = false
                this.$emit('resetList')
              } else {
                this.err('添加失败')
              }
            })
          }
        }
      })
    },
    beforeUpload () {
      this.loadAction('请稍等...')
    },
    selectionChange (val) {
      this.selectDataArr = val
    },
    dateChange (e) {
      let _this = this
      _this.$nextTick(() => {
        _this.$set(_this.formData, "form.taxesDateArr", [e[0], e[1]]);
        _this.$forceUpdate();
      });
    },
    // hxf-0916-弹框X关闭
    beforeClose () {
      this.$emit('handleCancel')
    },
    // hxf-0916-税率失焦校验
    handleClickTaxesName () {
      if (Number(this.form.taxes) < 0) {
        this.$message.error('税率值不能小于0！')
        this.form.taxes = ''
      }
      if (Number(this.form.taxes) > 100) {
        this.$message.error('税率值不能大于100！')
        this.form.taxes = ''
      }
    },
    cancel () {
      this.$emit('handleCancel')
    }
  }
}
</script>

<style lang='scss' scoped>
@include data-title();

@include info-list(2);
@include formWrap(3);
</style>
